<template>
  <footer class="footer" v-show="listLength">
    <span class="todo-count" v-show="leftLength"
      ><strong>{{ leftLength }}</strong
      >剩余</span
    >
    <ul class="filters">
      <li>
        <a :class="{selected:status==='selected'}" @click="changeStatus('selected')" href="#/">全部</a>
      </li>
      <li>
        <a :class="{selected:status==='active'}" @click="changeStatus('active')" href="#/active">进行中</a>
      </li>
      <li>
        <a :class="{selected:status==='completed'}" @click="changeStatus('completed')" href="#/completed">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="delAllDone" v-show="listLength">
      清除已完成
    </button>
  </footer>
</template>

<script>
export default {
  name: 'HmFooter',
  props: {
    leftLength: {
      type: Number,
      require: true
    },
    status:{
      type:String,
      require:true
    },
    listLength:{
      type: Number,
      require: true      
    }
  },
  data(){
    return{
      // status:'selected'
    }
  },
  methods: {
    delAllDone(){
    this.$emit('delAllDone')
    },
    changeStatus(value){
      this.$emit('changeStatus',value)
    }
  }
}
</script>

<style scoped lang="less"></style>
